import 'dart:math';

import 'package:flutter/material.dart';
import 'package:smart_shoes/define/define_colors.dart';

/// 我的头部视图类，用于构建我的页面头部的 UI 组件
class MyHeadView {
  // 容器内边距，左侧、右侧 16 像素，顶部 40 像素
  static const EdgeInsets containerPadding = EdgeInsets.only(
    left: 16,
    right: 16,
    top: 40,
  );

  // 容器高度，固定为 200 像素
  static const double containerHeight = 106;
  // 头像容器外边距，顶部 40 像素
  static const EdgeInsets avatarMargin = EdgeInsets.only(top: 40);
  // 头像大小，宽高均为 60 像素
  static const double avatarSize = 60;
  // 用户名，显示为 "王慧的妈妈"
  static const String userName = "王慧的妈妈";
  // 电话号码，显示为 "130****4734"
  static const String phoneNumber = "130****4734";

  // 头像的网络图片地址
  static const String avatarUrl =
      'https://img1.baidu.com/it/u=3921589634,1084294548&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500';

  /// 构建头像容器组件，包含圆形头像、边框和渐变背景
  Container buildAvatarContainer() {
    return Container(
      // margin: avatarMargin,
      padding: containerPadding,
      width: avatarSize,
      height: avatarSize,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        border: Border.all(color: Colors.white, width: 2.0),
        image: const DecorationImage(
          image: NetworkImage(avatarUrl),
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  /// 构建用户信息列组件，包含用户名和电话号码
  Column buildUserInfoColumn() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          userName,
          style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
        ),
        Text(
          phoneNumber,
          style: const TextStyle(fontSize: 14, color: Colors.grey),
        ),
      ],
    );
  }

  /// 构建主行组件，包含头像容器和用户信息列
  Widget buildMainRow() {
    return Stack(
      children: [
        Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 使用 Expanded 包裹头像容器，flex 设为 1
            Expanded(flex: 1, child: buildAvatarContainer()),
            // 使用 Expanded 包裹用户信息列，flex 设为 2
            Expanded(flex: 2, child: buildUserInfoColumn()),
            // 使用 Expanded 包裹空白间隔，flex 设为 1
            Expanded(flex: 1, child: const SizedBox()),
            // 使用 Expanded 包裹账号设置组件，flex 设为 1
            Expanded(
              flex: 1,
              child: Container(
                margin: const EdgeInsets.only(top: 0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const Text(
                      "账号设置",
                      style: TextStyle(
                        fontSize: 13,
                        color: CustomColors.textColor,
                      ),
                    ),
                    Image.asset(
                      'assets/images/jiantou-up.png',
                      width: 6.5,
                      height: 12,
                      fit: BoxFit.cover,
                    ),
                  ],
                ),
              ),
            ),
            // 移除 Positioned 组件，因为它不能直接放在 Row 里
            // 如果需要定位，可考虑使用 Stack 结合 Positioned
          ],
        ),

        //底纹
        Positioned(
          top: 0,
          right: 0,
          child: Image.asset(
            "assets/images/indexS.png",
            width: 107,
            height: 173,
          ),
        ),
      ],
    );
    // return Row(
    //   crossAxisAlignment: CrossAxisAlignment.start,
    //   children: [
    //     buildAvatarContainer(),
    //     Expanded(
    //       child: buildUserInfoColumn(),
    //     ),
    //     Text(
    //       "账号设置",
    //       style: TextStyle(
    //         fontSize: 13,
    //         color: CustomColors.textColor,
    //       ),
    //     ),
    //     Image.asset(
    //       'assets/images/jiantou-up.png',
    //       width: 6.5,
    //       height: 12,
    //       fit: BoxFit.cover,
    //     )
    //   ],
    // );
  }

  /// 构建内容视图，返回一个包含主要内容的容器组件
  Widget contentView() {
    return Container(
      padding: containerPadding,
      height: containerHeight,
      // color: Colors.red,
      child: buildMainRow(),
    );
  }
}
